<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图书管理</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body style="padding: 15px;">
  <!-- 添加图书的Panel面板 -->
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">添加新图书</h3>
    </div>
    <div class="panel-body form-inline">

      <div class="input-group">
        <div class="input-group-addon">书名</div>
        <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
      </div>

      <div class="input-group">
        <div class="input-group-addon">作者</div>
        <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
      </div>

      <div class="input-group">
        <div class="input-group-addon">出版社</div>
        <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
      </div>

      <button id="btnAdd" class="btn btn-primary">添加</button>

    </div>
  </div>


  <!-- 图书的表格 -->
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Id</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb"></tbody>
  </table>

  <script>
    $(function () {
      // 获取图书列表数据
      function getBookList() {
        $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
          if (res.status !== 200) {
            return alert("获取失败")
          }

          let str = ''
          $.each(res.data, function (i, item) {
            str += (
              `<tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td><a href="javascript:;" class="del" data-id="${item.id}">删除</a>
                </tr>`
            )
          })
          $('#tb').empty().append(str)//添加前先清空所有的
        })
      }
      getBookList()

      //通过代理的方式为动态添加的元素绑定点击事件
      $('body').on('click', '.del', function () {
        let id = $(this).data('id')
        console.log(id);
        //删除图书
        $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
          if (res.status !== 200) {
            return alert("图书删除失败")
          }
          getBookList()//删除完重新获取，渲染
        })

      })

      //添加图书
      $('#btnAdd').click(function () {
        let bookname = $('#iptBookname').val().trim()
        let author = $('#iptAuthor').val().trim()
        let publisher = $('#iptPublisher').val().trim()
        //判断输入的是否是空
        if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
          alert("输入不合法")
          return
        }
        $.ajax({
          type: 'POST',
          url: 'http://www.liulongbin.top:3006/api/addbook',
          data: {
            bookname: bookname,
            author: author,
            publisher: publisher
          },
          success: function (data) { //请求成功之后的回调函数
            if (data.status !== 201) {
              alert('添加失败')
            }
            $('input').val('')
            getBookList()
          }
        })
      })
    })
  </script>

</body>

</html>